<div>
  <table class="table fixed">
    <thead>
      <tr>
        <th>{{t "formMembers.members.name.label"}}</th>
        <th>{{t "formMembers.members.role.label"}}</th>
        <th width="10">&nbsp;</th>
        <th width="40"></th>
      </tr>
    </thead>
    <tbody>
      {{#if isNew}}
        {{#each defaultRoles as |defRole|}}
          <ProjectMemberRow
            @principal={{creator}}
            @roleTemplate={{defRole}}
            @pageType={{primaryResource.type}}
            @noUpdate={{true}}
            @isCreatorMember={{true}}
          />
        {{/each}}
      {{/if}}
      {{#each memberArray as |member|}}
        {{#unless member.pendingDelete}}
          <ProjectMemberRow
            @member={{member}}
            @editing={{editing}}
            @resource={{primaryResource}}
            @roles={{filteredRoles}}
            @users={{filteredUsers}}
            @pageType={{primaryResource.type}}
            @remove={{action "removeMember"}}
          />
        {{/unless}}
      {{/each}}
    </tbody>
  </table>

  <div class="mt-10">
    {{#if (and (lte filteredUsers.length 1) (eq access.provider "local"))}}
      {{#tooltip-element
         type="tooltip-basic"
         model=(t "formMembers.members.noAddUser")
         tooltipTemplate="tooltip-static"
         aria-describedby="tooltip-base"
         tooltipFor="tooltipNoUsers"
      }}
        <button class="btn bg-link icon-btn p-0" disabled=true type="button">
          <span class="darken"><i class="icon icon-plus text-small"/></span>
          <span>{{t "formMembers.members.addMember"}}</span>
        </button>
      {{/tooltip-element}}
    {{else}}
      <button class="btn bg-link icon-btn p-0" type="button" {{action "addMember" "User"}}>
        <span class="darken"><i class="icon icon-plus text-small"/></span>
        <span>{{t "formMembers.members.addMember"}}</span>
      </button>
    {{/if}}
  </div>
</div>
